<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		
		<style>
			div{
				width: 200px;
				height: 80px;
				background-color: lightblue;
				margin: 10px;
			}
			
			.c1{
				background-color: red;
			}
			.c2{
				color: blue;
			}
		</style>
		
		<script>
			$(function(){
				
				// 1.元素属性
				// attr()
				// prop()	checked属性
				
				// 获取属性
				console.log($("#div01").attr("id"));
				// 设置属性
				// $("#div01").attr("name","abc");
				$("div").attr("name",function(i,value){
					value = "abc"+(i+1);
					return value;
				});
				// 移除属性
				$("div").removeAttr("name");
				
					
				// 2.设置样式
				// 获取样式值
				// console.log($("div").css("width"));
				// 设置样式值
				$("div").css("width","30px");
				// $("div").css("width",function(i,value){
				// 	value = (50+50*i)+"px";
				// 	return value;
				// });
				
				// 3. 对class操作
				// $("div").addClass("c1");
				// // $("div:eq(1)").addClass("c1");
				// $("div:eq(1)").removeClass("c1");
				// $("div").click(function(){
				// 	// this 表示触发事件执行这个函数的dom对象
				// 	// $(this) 包装成jQuery,执行jQuery提供的函数
				// 	$(this).toggleClass("c1");
				// });
				
				// 4. html() text() val()
				
				// DOM方式
				// document.getElementById("div01").innerHTML = "abc";
				// document.getElementById("input1").value = "cba";
				
				// jQuery方式
				$("div").html("<a href='#'>abc</a>");
				console.log($("div").html());
				console.log($("div").text());
				
				console.log($("#input1").val());
				
			});
		
		</script>
		
	</head>
	<body>
		<div id="div01"></div>
		<div id="div02"></div>
		<div id="div03"></div>
		<div id="div04"></div>
		
		<input type="checkbox" id="chk1">
		<input type="checkbox" id="chk2">
		<input type="checkbox" id="chk3">
		
		<input type="text" id="input1" value="xxxxx" />
	</body>
</html>
